<template>
  <view
    :class="layoutModel !== 'horizontal' ? 'product-card' : 'product-horizontal'"
    @click="navigateToDetail(product.goodsId, product.id)"
  >
    <image :src="product.thumbImg" class="product-image" mode="aspectFill" />
    <view class="product-info">
      <text class="product-name">{{ product.skuName }}</text>
      <view class="price-bar">
        <text class="price">{{ product.salePrice }}</text>
        <view @click.stop="childClick(product.id, product.goodsId)">
          <view class="changeButtom">选规格</view>
        </view>
      </view>
      <view class="coupon-bar">
        <view class="discount-tag" v-if="!(product?.salePrice === product.marketPrice)">
          {{ ((product?.salePrice * 10) / product.marketPrice).toFixed(1) }}折
        </view>
        <text class="sales">已售{{ product.saleNum }}件</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { GoodsInfoStatusEnum } from '@/service/goods/goods.d'
import { defineEmits } from 'vue'

defineProps<{
  product: {
    id: number
    skuCode: string
    skuName: string
    goodsId: number
    thumbImg: string
    salePrice: number
    marketPrice: number
    costPrice: number
    stockNum: number
    saleNum: number
    skuSpec: string
    weight: number
    volume: number
    status: GoodsInfoStatusEnum
    category1Id: number
    category2Id: number
    collectTime?: string
    browseTime?: string
    createTime: string
    updateTime: string
    isDeleted: 0 | 1
  }
  layoutModel: string
}>()
const emit = defineEmits(['childClick'])

const navigateToDetail = (goodsId, id) => {
  uni.navigateTo({ url: `/pages/goods/info-index?id=${goodsId}&skuId=${id}` })
}

const childClick = (skuId: number | string, goodsId: string | number) => {
  emit('childClick', skuId, goodsId)
}
</script>

<style lang="scss" scoped>
.product-card {
  width: 336rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .product-image {
    width: 100%;
    height: 336rpx;
  }

  .product-info {
    padding: 20rpx;

    .product-name {
      display: -webkit-box;
      min-height: 80rpx;
      margin-bottom: 16rpx;
      overflow: hidden;
      font-size: 28rpx;
      line-height: 1.4;
      color: #000;

      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .price-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12rpx;

      .changeButtom {
        width: 66rpx;
        padding: 8rpx 6rpx;
        font-size: 20rpx;
        line-height: 1 !important;
        color: white;
        text-align: center;
        background-color: #e5492a;
        border-radius: 6rpx;
      }
      .price {
        position: relative;
        font-size: 36rpx;
        font-weight: 600;
        color: #e5492a;
        &::before {
          font-size: 22rpx;
          content: '￥';
        }
      }

      ::v-deep .wd-button {
        width: 60rpx;
        height: 60rpx;
        padding: 0;
        border-radius: 50%;
      }
    }
    .coupon-bar {
      display: flex;
      justify-content: space-between;
      .sales {
        font-size: 24rpx;
        color: #999;
      }
      .discount-tag {
        padding: 5rpx 10rpx;
        font-size: 20rpx;
        color: #e93b3b;
        background: linear-gradient(90deg, #ffe8e8, #ffd0d0);
        border-radius: 8rpx;
      }
    }
  }
}
</style>
